<template>
	<div class="image-block" :style="{
		height: compData.style.height + 'px',
		'border-top-left-radius': compData.data.borderRadiusTop + 'px',
		'border-top-right-radius': compData.data.borderRadiusTop + 'px',
		'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
		'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
	}">
		<div class="nav sa-flex sa-p-l-10">
			<img class="nav-img" :src="checkUrl('/storage/default/20250427/4a23b86ffac084c950e073909360fe30.png')" >
		</div>
		<div class="searchBox sa-flex sa-p-l-10 sa-p-r-10">
			<div class="search sa-flex sa-row-between sa-line-1">
				<div class="view">
					<el-icon class="sa-m-r-8">
						<Search />
					</el-icon>
					{{compData.data.searchText}}
				</div>
				<div class="btn sa-flex sa-row-center">搜索</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps(['compData']);
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';


</script>

<style lang="scss" scoped>
::v-deep {
	.sa-image .el-image {
		width: auto;
	}
}
.nav{
	height: 44px;
	.nav-img{
		width: 107px;
		height: 22px;
	}
}
.image-block {
	overflow: hidden;
	height: 88px;

	.sa-image {
		height: 80px;
		justify-content: flex-start;
	}
}
.searchBox{
	height: 44px;
	.search {
		width: 100%;
		height: 32px;
		line-height: 32px;
		border: 1px solid #eee;
		border-radius: 30px;
		padding: 0 4px 0 10px ;
		font-size: 12px;
		color: var(--sa-font);
		background: #fff;
	}
	.btn{
		border-radius: 30px;
		background: linear-gradient(180deg, #8487DB 0%, #E4B3E9 100%);
		width: 50px;
		height: 25px;
		font-family: Source Han Sans;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		letter-spacing: normal;
		color: #FFFFFF;
	}
}
</style>
